<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>

  <title>amay个人博客</title>
  <meta name="keywords" content="" />
  <meta name="description" content="个人博客" />
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
  
  <link  rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
  <link rel="stylesheet" type="text/css" href="css/animate.min.css" />
  <link rel="stylesheet" type="text/css" href="css/jquery.mCustomScrollbar.css" />
  <link rel="stylesheet" type="text/css" href="css/colors/DarkBlue.css" id="colors-style" />
  <link rel="stylesheet" type="text/css" href="css/switcher.css" />
  <link rel="stylesheet" type="text/css" href="css/main.css" />
  <link rel="stylesheet" type="text/css" href="css/prettyPhoto.css"/> 
 <!-- <link href='http://fonts.useso.com/css?family=Lato:300,400' rel='stylesheet' type='text/css'>-->
  <!--<link rel="shortcut icon" type="image/x-icon" href="images/favicon/favicon.ico">-->
        <!--[if IE 7]>
                <link rel="stylesheet" type="text/css" href="css/icons/font-awesome-ie7.min.css"/>
        <![endif]-->

        <style>

            @media only screen and (max-width : 1200px){
                .resp-vtabs ul.resp-tabs-list {
                    margin-left: 0 !important;
                }
            }

            @media only screen and (max-width : 991px){
                .resp-vtabs .resp-tabs-container {
                    margin-left: 13px;
                }
            }
			
			 @media only screen and (min-width : 800px) and (max-width : 991px){
                .resp-vtabs .resp-tabs-container {
					width:89%;
                }
            }

            @media only screen and (max-width : 800px){

                .widget-profil {
                    float: none !important;
                }
				.resp-vtabs .resp-tabs-container {
					width:100%;
                }
            }

            .widget-profil {
                float: left;
            }

            .resp-vtabs ul.resp-tabs-list {
                margin-left: 12px;
            }


        </style>

    </head>

    <body>

        <!--[if lt IE 7]>
                <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <!-- Laoding page -->
        <div id="preloader"><div id="spinner"></div></div>



        <!-- .slideshow -->
        <ul class="cb-slideshow" id="cb_slideshow" style="display:none">
            <li><span>Image 01</span><div></div></li>
            <li><span>Image 02</span><div></div></li>
            <li><span>Image 03</span><div></div></li>
            <li><span>Image 04</span><div></div></li>
            <li><span>Image 05</span><div></div></li>
            <li><span>Image 06</span><div></div></li>
        </ul> 
        <!-- /.slideshow --> 

        <!-- .wrapper --> 
        <div class="wrapper">

            <!--- .Content --> 
            <section class="tab-content">
                <div class="container">

                    <div class="row">

                        <div class="col-md-12">

                            <div class="row">   

                                <div class="col-md-3 widget-profil">

                                    <div class="row">

    <!-- Profile Image -->
    <div class="col-lg-12 col-md-12 col-sm-3 col-xs-12 ">
    	 
		 
                                
         <div class="image-holder one" id="pic_prof_1" style="display:block">
        
                <img class="head-image up circle" src="images/head/up.jpg" width="150" height="150" alt="" />
                <img class="head-image up-left circle" src="images/head/upleft.jpg" width="150" height="150" alt="" />
                <img class="head-image left circle" src="images/head/left.jpg" width="150" height="150" alt="" />
                <img class="head-image down-left circle" src="images/head/downleft.jpg" width="150" height="150" alt="" />
                <img class="head-image down circle" src="images/head/down.jpg" width="150" height="150" alt="" />
                <img class="head-image down-right circle" src="images/head/downright.jpg" width="150" height="150" alt="" />
                <img class="head-image right circle" src="images/head/right.jpg" width="150" height="150" alt="" />
                <img class="head-image up-right circle" src="images/head/upright.jpg" width="150" height="150" alt="" />
                <img class="head-image front circle" src="images/head/front.jpg" width="150" height="150" alt="" />
                
        </div>
        
        <!-- style for simple image profile -->		
   		<div class="circle-img" id="pic_prof_2" style="display:none"></div>
       
    
    </div>
    <!-- End Profile Image -->
  
    <div class="col-lg-12 col-md-12 col-sm-9 col-xs-12">
    
    
        <!-- Profile info -->
        <div id="profile_info">
            <h1 id="name" class="transition-02">阿美</h1>
            <h4 class="line">职业 &amp; Web 前端工程师</h4>
            <h6><span class="fa fa-map-marker"></span>上海</h6>
        </div>
        <!-- End Profile info -->  
    	
        
        <!-- Profile Description -->
        <div id="profile_desc">
            <p>
                &nbsp;&nbsp;我是阿美，是一名Web前端技术人员，喜欢我可以关注我哦。
            </p>
        </div>
        <!-- End Profile Description -->  
    	
        
        <!-- Name -->
         <div id="profile_social">
            <h6>我的社交</h6>
            <div class="t-center">
                <a href="#"><i class="fa fa-facebook"></i></a>
                <a href="https://github.com/Amay1115
    "><i class="fa fa-github-alt"></i></a>
            </div>
            <div class="clear"></div>
        </div>
        <!-- End Name -->  
      
    
    
    </div>
  
  </div>
</div>

<div class="col-md-9 flexy_content" style="padding-left: 0;padding-right: 0;">

    <!-- verticalTab menu -->
    <div id="verticalTab">
        
        <ul class="resp-tabs-list">
            <li class="tabs-profile hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5a profile" data-tab-name="profile">           
                <span class="tite-list">关于我</span>
                <i class="fa fa-user icon_menu icon_menu_active"></i>
            </li>

            <li class="tabs-resume hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5a" data-tab-name="resume"> 
                <span class="tite-list">简历</span>
                <i class="fa fa-tasks icon_menu"></i>
            </li>

            <li class="tabs-portfolio hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5a" data-tab-name="portfolio"> 
                <span class="tite-list">作品集</span>
                <i class="fa fa-briefcase icon_menu"></i>
            </li>

            <li class="tabs-blog hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5a" data-tab-name="blog">
                <span class="tite-list">博客</span>
                <i class="fa fa-bullhorn icon_menu"></i>
            </li>

            <li class="tabs-contact hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5a" data-tab-name="contact" style="margin-bottom: 48px !important;"> 
                <span class="tite-list">联系我</span>
                <i class="fa fa-envelope icon_menu"></i> 
            </li>

            <a href="#" id="print"><i class="fa fa-print icon_print"></i> </a>
            <a href="#" id="downlowd"><i class="fa fa-download icon_print"></i> </a>
        </ul>
        <!-- /resp-tabs-list -->

         
         <!-- resp-tabs-container --> 
        <div class="resp-tabs-container">

            <!-- profile -->
            <div id="profile" class="content_2">
                <!-- .title -->
                <h1 class="h-bloc">简介 - 关于我</h1>

                <div class="row top-p">
                    <div class="col-md-6 profile-l">
                        
                        <!--About me-->
                        <div class="title_content">
                            <div class="text_content">简介</div>
                            <div class="clear"></div>
                        </div>

                           <ul class="about">

                            <li>
                                <i class="glyphicon glyphicon-user"></i>
                                <label>姓名</label>
                                <span class="value">阿美</span>
                                <div class="clear"></div>
                            </li>

                            <li>
                                <i class="glyphicon glyphicon-calendar"></i>
                                <label>生日</label>
                                <span class="value">保密</span>
                                <div class="clear"></div>
                            </li>

                            <li> 
                                <i class="glyphicon glyphicon-map-marker"></i>
                                <label>坐标</label>
                                <span class="value">上海</span>
                                <div class="clear"></div>
                            </li>

                            <li>
                                <i class="glyphicon glyphicon-envelope"></i>
                                <label>邮箱</label>
                                <span class="value">18885689570@163.com</span>
                                <div class="clear"></div>
                            </li>

                            <li>
                                <i class="glyphicon glyphicon-phone"></i>
                                <label>电话</label>
                                <span class="value">18885689570</span>
                                <div class="clear"></div>
                            </li>

                            <li>
                                <i class="glyphicon glyphicon-globe"></i>
                                <label>博客</label>
                                <span class="value"><a href="https://amay1115.gitee.io/blog/" target="_blank">https://amay1115.gitee.io/blog/</a></span>
                                <div class="clear"></div>
                            </li>

                        </ul>


                        <p style="margin-bottom:20px">
                            <i class="fa fa-quote-left"></i>       
                          &nbsp;在几年的软件开发学习中，让我变得更有耐心，思维更活跃；也培养了我独立思考和资助续学习的能力，在压力和困难面前我有很好的分析能力和解决问题的能力。<br/>&nbsp;&nbsp;我更是一富有团队精神的人，能够相互协作和充分的沟通。具备软件开发能力谋求网页前端开发职务。
                        </p>
                        
                         <p style="margin-bottom:20px">
                            <i class="fa fa-quote-left"></i>       
                            对于不屈不挠的人来说，没有失败这回事。<br/>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;——俾斯麦

                        </p>

                    </div>
                    <!-- End left-wrap -->

                    <div class="col-md-6 profile-r">

                        <div class="cycle-slideshow">
                            <img src="images/img-profile/about_1.jpg" alt="" />
                            <img src="images/img-profile/about_2.png" alt="" />
                            <img src="images/img-profile/about_3.png" alt="" />
                        </div>

                    </div>

    </div>
    <div class="clear"></div>


    <div class="row" id="services">
        <div class="col-md-12">
            <div class="title_content">
                <div class="text_content">为您服务</div>
                <div class="clear"></div>
            </div>
    
    
            <div class="col-md-4 pack-service">
                <div class="service">
                    <div class="service-icon"><i class="fa fa-tag"></i></div>
                    <div class="service-detail">
                        <h6>网站建设</h6>
                        <p>如果你有这方面的需求，可以联系我做外包，包括以下方面：<br/>网站制作<br/>根据需求，对网站前端进行修改和优化，或者响应式处理<br/>企业网站建设及二次开发
                        <br/>对于网站建设项目，我也有一些同行朋友可以推荐，欢迎咨询</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 pack-service">
                <div class="service">
                    <div class="service-icon"><i class="fa fa-cogs"></i></div>
                    <div class="service-detail">
                        <h6>平面设计</h6>
                        <p>如果你有这方面的需求，可以联系我做外包，包括以下方面：
                            <br/>创意、构图、色彩<br/>海报设计、标志设计、VI设计、包装设计、书籍设计、网页设计、界面设计、字体设计等
                            <br/>对于平面设计，我也有一些同行朋友可以推荐，欢迎咨询</p>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 pack-service">
                <div class="service">
                    <div class="service-icon"><i class="fa fa-arrows-alt"></i></div>
                    <div class="service-detail">
                        <h6>UI设计</h6>
                        <p>如果你有这方面的需求，可以联系我做外包，包括以下方面：
                            <br/>简单的WEB端界面交互设计
                            
                            <br/>对于UI设计，我也有一些同行朋友可以推荐，欢迎咨询
                        </p>
                    </div>
                </div>
            </div>
         </div> 
    </div><!-- End Services -->


    <div class="clear"></div>
    <div class="border-list"></div>
	
    <div class="row">
       <div class="col-md-12">
        <div class="bottom-p">
            <div class="title_content">
                <div class="text_content">我的开发之路</div>
                <div class="clear"></div>
            </div>
    
            <div class="panel-group" id="accordion">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class="collapse_tabs">
                                经验总结 
                                <i class="glyphicon glyphicon-chevron-up" style="float: right;font-size: 13px;"></i>
                            </a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in">
                        <div class="panel-body">
                            <i class="fa fa-quote-left"></i> &nbsp;1、学历。“学历代表过去、能力代表现在、学习力代表未来。”其实这是一个来自国外教育领域的一个研究果。相信工作过几年、十几年的朋友对这个道理有些体会吧。但我相信这一点也很重要：“重要的道理明白太晚将抱憾终生！”<br/>
                            &nbsp;&nbsp;2、看书。书籍是人类进步的阶梯，对软件开发人员尤其如此。书籍是学习知识的最有效途径，不要过多地指望在工作中能遇到“世外高人”，并不厌其烦地教你。对于花钱买书，我个人经验是：千万别买国内那帮人出的书！我买的那些家伙出的书，!%全部后悔了，无一本例外。更气愤的是，这些书在二手市场的地摊上都很难卖掉。“拥有书籍并不表示拥有知识；拥有知识并不表示拥有技能；拥有技能并不表示拥有文化；拥有文化并不表示拥有智慧。”只有将书本变成的自己智慧，才算是真正拥有了它。<br/>
                            &nbsp;&nbsp;3、注意细节。刚开始工作的时候老是喜欢用拼音命名，觉得很方便，直到有一天我的项目出错了，我才意识到不规范命名的后果由多严重。后来老大告诉我，不要小看这些细节，虽然都是习惯，为什么不养成一个好的习惯呢。这个就不举例子了，相信前端人员能懂得。
                        </div>
                    </div>
                </div>
             
            </div>
    
        </div>
       </div>
    </div>
    <div class="clear"></div>
</div>
<!-- End .profile -->

<!-- .resume -->
<div id="resume" class="content_2">
    <!-- .title -->
    <h1 class="h-bloc">简历 - 个人信息</h1> 

    <div class="row">

        <!-- .resume-right -->
        <div class="col-md-6">

            <!-- .title_content -->
            <div class="title_content" style="float: none;">
                <div class="text_content">设计技能</div>
                <div class="clear"></div>
            </div>
            <!-- /.title_content -->
            
            <div class="skills">
                <!-- .skillbar -->
                <div class="skillbar clearfix" data-percent="95%">
                    <div class="skillbar-title"><span>Photoshop</span></div>
                    <div class="skillbar-bar"></div>
                    <div class="skill-bar-percent">95%</div>
                </div>
        
                <!-- /.skillbar -->
                
                <!-- .skillbar -->
                <div class="skillbar clearfix" data-percent="50%">
                    <div class="skillbar-title"><span>Illustrateur</span></div>
                    <div class="skillbar-bar"></div>
                    <div class="skill-bar-percent">50%</div>
                </div>
                <!-- /.skillbar -->
                
                <!-- .skillbar -->
                <div class="skillbar clearfix" data-percent="65%">
                    <div class="skillbar-title"><span>Indesign</span></div>
                    <div class="skillbar-bar"></div>
                    <div class="skill-bar-percent">65%</div>
                </div>
                <!-- /.skillbar -->
                
                <!-- .skillbar -->
                <div class="skillbar clearfix" data-percent="35%">
                    <div class="skillbar-title"><span>Flash</span></div>
                    <div class="skillbar-bar"></div>
                    <div class="skill-bar-percent">35%</div>
                </div>
                <!-- /.skillbar -->
                 <!-- .skillbar -->
                 <div class="skillbar clearfix" data-percent="98%">
                    <div class="skillbar-title"><span>Dreamware</span></div>
                    <div class="skillbar-bar"></div>
                    <div class="skill-bar-percent">98%</div>
                </div>
                <!-- /.skillbar -->
            </div>
            
            
            <!-- .title_content -->
            <div class="title_content" style="float: none;">
                <div class="text_content">编程技能</div>
                <div class="clear"></div>
            </div>
            <!-- /.title_content -->
            
            <div class="skills">
                <!-- .skillbar -->
                <div class="skillbar clearfix" data-percent="85%">
                    <div class="skillbar-title"><span>html+css</span></div>
                    <div class="skillbar-bar"></div>
                    <div class="skill-bar-percent">85%</div>
                </div>
                <!-- /.skillbar -->
                
                <!-- .skillbar -->
                <div class="skillbar clearfix" data-percent="55%">
                    <div class="skillbar-title"><span>js+jq+ajax</span></div>
                    <div class="skillbar-bar"></div>
                    <div class="skill-bar-percent">85%</div>
                </div>
                <!-- /.skillbar -->
                
                <!-- .skillbar -->
                <div class="skillbar clearfix" data-percent="60%">
                    <div class="skillbar-title"><span>html5+css3</span></div>
                    <div class="skillbar-bar"></div>
                    <div class="skill-bar-percent">80%</div>
                </div>
                <!-- /.skillbar -->
                
                 <!-- .skillbar -->
                <div class="skillbar clearfix" data-percent="35%">
                    <div class="skillbar-title"><span>angularjs</span></div>
                    <div class="skillbar-bar"></div>
                    <div class="skill-bar-percent">35%</div>
                </div>
                <!-- /.skillbar --> 
                
                <!-- .skillbar -->
                <div class="skillbar clearfix" data-percent="35%">
                    <div class="skillbar-title"><span>bootstrap</span></div>
                    <div class="skillbar-bar"></div>
                    <div class="skill-bar-percent">35%</div>
                </div>
                <!-- /.skillbar --> 
                
                <!-- .skillbar -->
                <div class="skillbar clearfix" data-percent="35%">
                    <div class="skillbar-title"><span>jquery mobile</span></div>
                    <div class="skillbar-bar"></div>
                    <div class="skill-bar-percent">35%</div>
                </div>
                <!-- /.skillbar --> 
            </div>
            
             
            <!-- .title_content -->
            <div class="title_content" style="float: none;">
                <div class="text_content">办公技能</div>
                <div class="clear"></div>
            </div>
            <!-- /.title_content -->
                
            <div class="skills">       
                <!-- .skillbar -->
                <div class="skillbar clearfix" data-percent="85%">
                    <div class="skillbar-title"><span>MS Excel</span></div>
                    <div class="skillbar-bar"></div>
                    <div class="skill-bar-percent">85%</div>
                </div>
                <!-- /.skillbar -->
                
                <!-- .skillbar -->
                <div class="skillbar clearfix " data-percent="95%">
                    <div class="skillbar-title"><span>MS Word</span></div>
                    <div class="skillbar-bar"></div>
                    <div class="skill-bar-percent">95%</div>
                </div>
                <!-- /.skillbar -->
                
                <!-- .skillbar -->
                <div class="skillbar clearfix " data-percent="60%">
                    <div class="skillbar-title"><span>Powerpoint</span></div>
                    <div class="skillbar-bar"></div>
                    <div class="skill-bar-percent">60%</div>
                </div>
                <!-- /.skillbar -->
                
                <!-- .skillbar -->
                <div class="skillbar clearfix " data-percent="40%">
                    <div class="skillbar-title"><span>SharePoint</span></div>
                    <div class="skillbar-bar"></div>
                    <div class="skill-bar-percent">40%</div>
                </div>
                <!-- /.skillbar -->   
            </div>
            
            
            <!-- .title_content -->
            <div class="title_content" style="float: none;">
                <div class="text_content">兴趣爱好</div>
                <div class="clear"></div>
            </div>
            <!-- /.title_content -->
            
            <div class="skills">
                <!-- .skillbar -->
                <div class="skillbar clearfix" data-percent="60%">
                    <div class="skillbar-title"><span>Music</span></div>
                    <div class="skillbar-bar"></div>
                    <div class="skill-bar-percent">60%</div>
                </div>
                <!-- /.skillbar -->
                
                <!-- .skillbar -->
                <div class="skillbar clearfix " data-percent="95%">
                    <div class="skillbar-title"><span>Sport</span></div>
                    <div class="skillbar-bar"></div>
                    <div class="skill-bar-percent">95%</div>
                </div>
                <!-- /.skillbar -->
                
                <!-- .skillbar -->
                <div class="skillbar clearfix " data-percent="85%">
                    <div class="skillbar-title"><span>Reading</span></div>
                    <div class="skillbar-bar"></div>
                    <div class="skill-bar-percent">85%</div>
                </div>
                <!-- /.skillbar -->
                
                <!-- .skillbar -->
                <div class="skillbar clearfix " data-percent="70%">
                    <div class="skillbar-title"><span>Travelling</span></div>
                    <div class="skillbar-bar"></div>
                    <div class="skill-bar-percent">70%</div>
                </div>
                <!-- /.skillbar -->
            </div>
            
            
            <!-- .title_content -->
            <div class="title_content" style="float: none;">
                <div class="text_content">语言技能</div>
                <div class="clear"></div>
            </div>
            <!-- /.title_content -->
            
            <div class="skills">
                <!-- .skillbar -->
                <div class="skillbar clearfix" data-percent="35%">
                    <div class="skillbar-title"><span>English</span></div>
                    <div class="skillbar-bar"></div>
                    <div class="skill-bar-percent">35%</div>
                </div>
                <!-- /.skillbar -->
            </div>
            
            
            <!-- .title_content -->
            <!--<div class="title_content" style="float: none;">
                <div class="text_content">我的简历</div>
                <div class="clear"></div>
            </div>-->
            <!-- /.title_content -->
            
            <!-- .download_resume -->
           <!-- <a class="download" style="margin:0;float: left;" href="#">
                <span data-hover="下载我的简历"><i class="glyphicon glyphicon-download-alt"></i> 下载我的简历</span>
            </a>-->
            <!-- /.download_resume -->

    </div>
    <!-- /.resume-right -->
     
     
     
     <!-- .resume-left -->

    <div class="col-md-6 resume-left">    
        <!-- .title_content -->
        <div class="title_content" style="margin-bottom:5px">
            <div class="text_content">经验</div>
            <div class="clear"></div>
        </div>
        <!-- /.title_content -->
        
        <!-- .attributes -->
        <ul class="attributes">
            <li class="first">
                <h5>Web前端开发 <span class="duration"><i class="fa fa-calendar color"></i> 2015.1 - 2016.3</span></h5>
                <h6><span class="fa fa-briefcase"></span><a href="http://www.ycczxy.com/"> 重庆优纯旅游</a></h6>
                <p>主要负责网页的设计与开发，并在公司期间建立工作小组，加快了公司项目的进程，为公司创造了不错的业绩。</p>
            </li>
            <li>
                <h5>Web前端开发<span class="duration"><i class="fa fa-calendar color"></i> 2016.3 -   至今</span></h5>
                <h6><span class="fa fa-briefcase"></span> <a href="www.effice.com">爱办公</a></h6>
                <p>爱办公是易勤旗下公司，主要自主研发、制造运营、空间规划、销售服务为一体，打造用户体验一流的办公形态产品，用户体验设计和办公空间规划<br/>主要负责网站前端开发以及代码迭代</p>
            </li>

        </ul>
        <!-- /.attributes -->
        <br>
        
        <!-- .title_content -->
        <!--<div class="title_content">
            <div class="text_content">教育</div>
            <div class="clear"></div>
        </div>-->
        <!-- /.title_content -->
        
        <!-- .attributes -->
        <!--<ul class="attributes">
            <li class="first">
                <h5>本科 <span class="duration"><i class="fa fa-calendar color"></i> 2011 - 2013</span></h5>
                <h6><span class="fa fa-book"></span> 重庆</h6>
                <p>、</p>
            </li>
        </ul>-->
        <!-- /.attributes -->
        <br>  
        
        
          <!-- .title_content -->
        <div class="title_content">
            <div class="text_content">其他</div>
            <div class="clear"></div>
        </div>
        <!-- /.title_content -->
        
        <!-- .attributes -->
        <!--<ul class="attributes">
            <li class="first">
                <h5>Graphic &amp; Art Direction <span class="duration"><i class="fa fa-calendar color"></i> 2013 - 2014</span></h5>
                <h6><span class="fa fa-trophy"></span> Name of Institute</h6>
                <p>Emi Phasellus congue auctor risuspon, eget males. Pellentes que un imperdiet, odio quis orn sollicitud. Sed vitae lectus elementum mauris.</p>
            </li>
            <li>
                <h5>Design &amp; Art Direction <span class="duration"><i class="fa fa-calendar color"></i> 2012 - 2013</span></h5>
                <h6><span class="fa fa-trophy"></span> Name of Institute</h6>
                <p>Emi Phasellus congue auctor risuspon, eget males. Pellentes que un imperdiet, odio quis orn sollicitud. Sed vitae lectus elementum mauris.</p>
            </li>
  
        </ul>-->
        <!-- /.attributes -->
        <br>  
        
    </div>
    <!-- /.resume-left -->
</div>

<div style="clear: both"></div>  
  
  
<!-- client reference -->
<div class="row">
    <div class="col-md-12">   
    
<div class="reference clearfix"> 
            
         <!-- .title_content -->
        <div class="title_content" style="margin-bottom:5px">
            <!-- <div class="text_content">Client reference</div> -->
            <div class="clear"></div>
        </div>
        <!-- /.title_content -->
        
        </div>
     </div>
       
     <div style="clear: both"></div>   
</div>

</div>
<!-- End .resume -->

<!-- .portfolio -->
<div id="portfolio" class="content_2">
    
    <!-- .title -->
    <h1 class="h-bloc">作品集 - 我的作品</h1>

    <!-- .container-portfolio -->
    <div class="container-portfolio">

        <!-- #filters -->
        <ul id="filters" class="clearfix">
            <li><span class="filter active" data-filter="catWeb catGraphic catMotion logo">全部</span></li>
            <!-- <li><span class="filter" data-filter="catWeb">网站制作</span></li>
            <li><span class="filter" data-filter="catGraphic">平面设计</span></li>
            <li><span class="filter" data-filter="catMotion">UI设计</span></li>
            <li><span class="filter" data-filter="logo">标识</span></li> -->
        </ul>
        <!-- /#filters -->

        <!-- #portfoliolist -->
        <div id="portfoliolist">

            <!-- .portfolio -->
            <div class="portfolio logo" data-cat="logo">    
                <!-- .portfolio-wrapper -->
                <div class="portfolio-wrapper">     
                    <a href="images/portfolio/1_1.png" rel="portfolio" title="在校时接的一些活">

                        <img src="images/portfolio/1.png" alt=""/>
                        <div class="label">
                            <div class="label-text">
                                <a class="text-title" href="#">茶</a>
                                <span class="text-category">2014.1-2014.3</span>
                                
                            </div>
                            <div class="label-bg"></div>
                        </div>
                    </a>
                </div>
                <!-- /.portfolio-wrapper -->
            </div>      
            <!-- /.portfolio -->



            <!-- .portfolio -->
            <div class="portfolio catWeb" data-cat="catWeb">
                <!-- .portfolio-wrapper -->
                <div class="portfolio-wrapper">         
                    <a href="images/portfolio/2_1.jpg" rel="portfolio" title="中国文化之旅">
                        <img src="images/portfolio/2.jpg" alt="Sonor's Design" />
                        <div class="label">
                            <div class="label-text">
                                <a class="text-title" href="https://amay1115.github.io/culture/">中国文化之旅</a>
                                <span class="text-category">2014.3-2014.3</span>
                            </div>
                            <div class="label-bg"></div>
                        </div>
                    </a>
                </div>
                <!-- /.portfolio-wrapper -->
            </div>              
            <!-- /.portfolio -->

            <!-- .portfolio -->
            <div class="portfolio catWeb" data-cat="catWeb">
                <!-- .portfolio-wrapper -->
                <div class="portfolio-wrapper">         
                    <a href="images/portfolio/4_1.png" rel="portfolio" title="人力资源">
                        <img src="images/portfolio/4.png" alt="Sonor's Design" />
                        <div class="label">
                            <div class="label-text">
                                <a class="text-title" href="https://amay1115.github.io/huixiepc/
">人力资源</a>
                                <span class="text-category">2014.8-2015.1</span>
                            </div>
                            <div class="label-bg"></div>
                        </div>
                    </a>
                </div>
                <!-- /.portfolio-wrapper -->
            </div>              
            <!-- /.portfolio -->
            
            <!-- .portfolio -->
            <div class="portfolio catWeb" data-cat="catWeb">
                <!-- .portfolio-wrapper -->
                <div class="portfolio-wrapper">         
                    <a href="images/portfolio/3.png" rel="portfolio" title="重庆优纯旅游">
                        <img src="images/portfolio/3_1.png" alt="Sonor's Design" />
                        <div class="label">
                            <div class="label-text">
                                <a class="text-title" href="http://www.ycczxy.com/">优纯旅游</a>
                                <span class="text-category">2015.1-2016.3</span>
                            </div>
                            <div class="label-bg"></div>
                        </div>
                    </a>
                </div>
                <!-- /.portfolio-wrapper -->
            </div>              
            <!-- /.portfolio -->

            
            
            <!-- .portfolio -->
            <div class="portfolio catWeb" data-cat="catWeb">
                <!-- .portfolio-wrapper -->
                <div class="portfolio-wrapper">         
                    <a href="images/portfolio/5_1.gif" rel="portfolio" title="404动画">
                        <img src="images/portfolio/5.png" alt="Sonor's Design" />
                        <div class="label">
                            <div class="label-text">
                                <a class="text-title" href="http://www.17sucai.com/pins/demoshow/19370">404动画</a>
                                <span class="text-category">2016.3</span>
                            </div>
                            <div class="label-bg"></div>
                        </div>
                    </a>
                </div>
                <!-- /.portfolio-wrapper -->
            </div>              
            <!-- /.portfolio -->

            <!-- .portfolio -->
            <div class="portfolio catWeb" data-cat="catWeb">
                <!-- .portfolio-wrapper -->
                <div class="portfolio-wrapper">         
                    <a href="images/portfolio/6_1.png" rel="portfolio" title="404动画">
                        <img src="images/portfolio/6.png" alt="Sonor's Design" />
                        <div class="label">
                            <div class="label-text">
                                <a class="text-title" href="www.effice.com">爱办公</a>
                                <span class="text-category">2016.3-2016.10</span>
                            </div>
                            <div class="label-bg"></div>
                        </div>
                    </a>
                </div>
                <!-- /.portfolio-wrapper -->
            </div>              
            <!-- /.portfolio -->

            <div class="clear"></div>

        </div>
        <!-- #portfoliolist -->
    </div>
    <!-- /.container-portfolio -->
</div>
<!-- End .portfolio -->

<!-- .blog -->
<div id="blog" class="content_2">
    <h1 class="h-bloc">博客 - 快节奏慢生活</h1><br> 

        <div class="col-md-12">
            <div class="row">

                <!-- Page Blog -->
                <div class="col-md-12" id="blog_page">
                    <!-- start Page Blog -->
                    <section id="blog-page">

                        <!-- Post 1 --> 
                        <article id="post-1" class="blog-article">                    

                            <div class="col-md-12">

                                <div class="row">

                                    <div class="col-md-12 post_media">
                                        <div class="post-format-icon">
                                            <a href="#" class="item-date"><span class="fa fa-picture-o"></span></a>
                                        </div>
                                        <div class="media">
                                            <div class="he-wrap tpl2">
                                                <div id="carousel-1" class="carousel slide" data-ride="carousel">

                                                    <ol class="carousel-indicators">
                                                        <li data-target="#carousel-1" data-slide-to="0" class="active"></li>
                                                        <li data-target="#carousel-1" data-slide-to="1"></li>
                                                        <li data-target="#carousel-1" data-slide-to="2"></li>
                                                    </ol>

                                                    <div class="carousel-inner">

                                                        <div class="item active">
                                                            <img src="images/blog/blog-1.jpg" alt="" />
                                                            <div class="carousel-caption">
                                                                <h4>优雅，是一种岁月</h4>
                                                               
                                                            </div>
                                                        </div>


                                                        <div class="item">
                                                            <img src="images/blog/blog-2.jpg" alt="" />
                                                            <div class="carousel-caption">
                                                                <h4>笑看风雨</h4>
                                                               
                                                            </div>
                                                        </div>

                                                        <div class="item">
                                                            <img src="images/blog/blog-3.jpg" alt="" />
                                                            <div class="carousel-caption">
                                                                <h4>淡然人生</h4>
                                                               
                                                            </div>
                                                        </div>

                                                    </div>

                                                    <a class="left carousel-control" href="#carousel-1" data-slide="prev">
                                                        <span class="glyphicon glyphicon-chevron-left"></span>
                                                    </a>

                                                    <a class="right carousel-control" href="#carousel-1" data-slide="next">
                                                        <span class="glyphicon glyphicon-chevron-right"></span>
                                                    </a>

                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-12 post_content">
                                        <div class="content post_format_standart">
                                            <div class="top_c ">

                                                <div class="title_content">
                                                    <div class="text_content"><a href="#post-1" class="read_more">优雅，是一种岁月</a></div>
                                                    <div class="clear"></div>
                                                </div>

                                                <ul class="info">
                                                    <li><i class="glyphicon glyphicon-comment"></i> 2 评论</li>
                                                    <li><i class="glyphicon glyphicon-time"></i>2016.10.27</li>
                                                    <li><i class="glyphicon glyphicon-user"></i> mm</li>
                                                    <li><i class="glyphicon glyphicon-tag"></i> 优雅，岁月，淡然</li>
                                                </ul>

                                                <div class="blog-content">
                                                    <p><i class="fa fa-quote-left"></i> 优雅，是一种岁月，它是历经生命种种而呈现出的一种淡若不惊，褪去了少时的稚嫩，而呈现出的一种成熟的韵味。一个优雅的人，一定有着独特的魅力，和饱满的，恬淡而丰盈的灵魂。生活多了一份阳光，少了一些阴霾，懂得了一步一个脚印的踏实和安稳。在简单的外表下，少了浮华，多了一份厚重。一个优雅的人，定是一个大气而宽容的人，在这个浮躁的社会中，如一抹清风，让人心旷神怡，因为心中有山水，在何时何地，都会呈现出清秀的容颜，优雅而迷人的风采...</p></div>
                                            </div>
                                        </div>  

                                        <a href="#post-1" class="read_m pull-right">Read More <i class='glyphicon glyphicon-chevron-right'></i></a>

                                    </div>
                                </div>

                            </div>
                        </article>
                        <!-- End Post 1 -->

                        <div class="clear"></div>

                        <!-- Post 2 -->
                        <article id="post-2" class="blog-article">                    

                            <div class="col-md-12">

                                <div class="row">

                                    <div class="col-md-12 post_media">

                                        <div class="post-format-icon">
                                            <a href="#" class="item-date"><span class="fa fa-pencil"></span></a>
                                        </div>

                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-12 post_content">
                                        <div class="content post_format_standart">
                                            <div class="top_c ">

                                                <div class="title_content">
                                                    <div class="text_content"><a href="#post-2" class="read_more">浅谈web前端开发</a></div>
                                                    <div class="clear"></div>
                                                </div>

                                                <ul class="info">
                                                    <li><i class="glyphicon glyphicon-comment"></i> 2 评论</li>
                                                    <li><i class="glyphicon glyphicon-time"></i> 2016.10.28</li>
                                                    <li><i class="glyphicon glyphicon-user"></i> 地瓜</li>
                                                    <li><i class="glyphicon glyphicon-tag"></i> php, web design</li>
                                                </ul>

                                                <div class="blog-content">
                                                    <p><i class="fa fa-quote-left"></i> 有部分同学和朋友问到过我相关问题，利用周末我就浅浅地谈谈我对web前端开发的理解和体会，只能浅浅谈谈，高手请自动跳过本篇文章。毕竟我现在经验并不是很足，连工程师都算不上，更不用说大牛了。今天也不谈技术，技术很多人比我掌握得更好，也大同小异，但是每个人的理解体会是不一样的。</p></div>
                                            </div>
                                        </div>  

                                        <a href="#post-2" class="read_m pull-right">Read More <i class='glyphicon glyphicon-chevron-right'></i></a>

                                    </div>
                                </div>

                            </div>
                        </article>
                        <!-- End Post 2 -->

                        <div class="clear"></div>

                        <!-- Post 3 -->
                        <article id="post-3" class="blog-article">                    

                            <div class="col-md-12">

                                <div class="row">

                                    <div class="col-md-12 post_media">

                                        <div class="post-format-icon">
                                            <a href="#" class="item-date"><span class="fa fa-picture-o"></span></a>
                                        </div>

                                        <div class="media">
                                            <div class="he-wrap tpl2">
                                                <img src="images/blog/blog-4.jpg" class="img-hover" alt="" />
                                            </div>

                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-12 post_content">
                                        <div class="content post_format_standart">
                                            <div class="top_c ">

                                                <div class="title_content">
                                                    <div class="text_content"><a href="#post-3" class="read_more">浅谈PHP发展前景及就业</a></div>
                                                    <div class="clear"></div>
                                                </div>

                                                <ul class="info">
                                                    <li><i class="glyphicon glyphicon-comment"></i> 2 评论</li>
                                                    <li><i class="glyphicon glyphicon-time"></i> 2016.10.28</li>
                                                    <li><i class="glyphicon glyphicon-user"></i> 余生</li>
                                                    <li><i class="glyphicon glyphicon-tag"></i> php, web design</li>
                                                </ul>

                                                <div class="blog-content">
                                                    <p><i class="fa fa-quote-left"></i> PHP发展前景好吗?这是很多想要学习PHP开发的朋友所关注的
                                                    问题。有的人会说：“IT一直以来都是PHP和.net的天下，PHP发
                                                    展前景远没有这两个好。”</p>
                                                </div>
                                            </div>
                                        </div>  

                                        <a href="#post-3" class="read_m pull-right">Read More <i class='glyphicon glyphicon-chevron-right'></i></a>

                                    </div>
                                </div>

                            </div>
                        </article>

                        <!-- End Post 3 -->

                    </section>

                    <!-- End Page Blog -->



            <!-- Page Blog - Post 1 -->
            <section id="post-1-page" class="content-post" style="display: none">
                <div class="row inner">

                    <div class="col-md-12" style="width: 100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;float: left;background: rgba(255, 255, 255, 0.8);padding-bottom: 15px;padding-top: 15px;">

                        <article class="postPage">

                            <div class="col-md-12 post_media">
                                <div class="post-format-icon">
                                    <a href="#" class="item-date"><span class="fa fa-picture-o"></span></a>
                                </div>
                                <div class="media">
                                    <div class="he-wrap tpl2">
                                        <div id="carousel-2" class="carousel slide" data-ride="carousel">

                                            <ol class="carousel-indicators">
                                                <li data-target="#carousel-2" data-slide-to="0" class="active"></li>
                                                <li data-target="#carousel-2" data-slide-to="1"></li>
                                                <li data-target="#carousel-2" data-slide-to="2"></li>
                                            </ol>

                                            <div class="carousel-inner">

                                                <div class="item active">
                                                    <img src="images/blog/blog-1.jpg" alt="">
                                                    <div class="carousel-caption">
                                                        <h4>优雅，是一种岁月</h4>
                                                       
                                                    </div>
                                                </div>


                                                <div class="item">
                                                    <img src="images/blog/blog-2.jpg" alt="">
                                                    <div class="carousel-caption">
                                                        <h4>笑看风雨</h4>
                                                    
                                                    </div>
                                                </div>

                                                <div class="item">
                                                    <img src="images/blog/blog-3.jpg" alt="">
                                                    <div class="carousel-caption">
                                                        <h4>淡然人生</h4>
                                                        
                                                    </div>
                                                </div>

                                            </div>

                                        </div>
                                    </div>

                                </div>
                            </div>


                            <div class="title_content">
                                <div class="text_content">Blog Post Gallery</div>
                                <div class="clear"></div>
                            </div>

                            <p class="caps">优雅，是一种岁月，它是历经生命种种而呈现出的一种淡若不惊，褪去了少时的稚嫩，而呈现出的一种成熟的韵味。一个优雅的人，一定有着独特的魅力，和饱满的，恬淡而丰盈的灵魂。生活多了一份阳光，少了一些阴霾，懂得了一步一个脚印的踏实和安稳。在简单的外表下，少了浮华，多了一份厚重。一个优雅的人，定是一个大气而宽容的人，在这个浮躁的社会中，如一抹清风，让人心旷神怡，因为心中有山水，在何时何地，都会呈现出清秀的容颜，优雅而迷人的风采。</p><br/>

                            <p class="capss">优雅不是不染铜臭的清高，也不是守着风花雪月独自吟唱，更不是用心修饰自己，时刻保持端襟正坐，让别人来欣赏的姿态，在我看来，优雅从来不是做给别人看的，真正的优雅，是修于内心，起于形色，表于外在。而这种外在，只是自己内心层次的一个体现，与他人无关。一个优雅的人。能够在平淡的生活中，很好的做自己，学会给予，并且有能力去给予，懂得感恩，心中有爱，知书达理，宽容善良就是优雅。</p><br/>

                            <p class="capss">优雅并非是与生惧来的，它是心灵和智慧的完美结合。一个人的优雅，是来自阅读，人生历练和生活的塑造，是自信，独立和高雅的象征，这种品质是来自对生命的领悟，和人生的沉淀和积累。它绝不是单指外表的美丽，是顺应生活不同状况而反映出来的一种内心的智慧。优雅的人，定是有一双感受美的眼睛，有一颗善良的心灵，是岁月塑造出灵魂深处的智慧，人生最珍贵的是历经生活的千回百转，仍能有一颗柔软善良的心。优雅，挥洒出一种浑然天成的风韵，是一种深邃的美。</p><br/>

                            <p class="capss">优雅与年龄也许有关，但更与自身的强大有关。一个优雅的人，一定是一个自律的人，无论外界有多大的诱惑，都不为之所动，懂得自恃和宽容，无论是在生活的困顿与挫折下，依然能保持窗明几净，清新淡雅。无论生活给予怎样的际遇，都能自我反省，温故而知新，懂得尊重和感恩，对朋友淡而无心机，对亲人温暖而宽厚，对他人，不鄙视，不疏离，教养不是谦逊，是与生散发的自信和修养，而优雅，是源于一种自爱，光阴深邃，只要你愿意。一定会优雅的变成自己喜欢的样子。</p><br/>

                            <p class="capss">优雅与相貌或许有关，但更与个人的内心的修养有关，一个没有思想的人，既使你画着最完美的妆容，也掩盖不了内心的丑陋，反而会让人觉得虚伪。一个优雅的人，一定是懂得自爱，自信有独立的人格，扎实的智慧，淡定的谈吐，干净的面容和一颗善良的心，美的不张扬，恰到好外。林肯说，三十岁的人，要为自己的相貌负责任，当一个人拥有优雅的内心，不论是外貌如何，都美得迷人，真正的美丽，是一种由外而内的气场，喜欢一个人，始于颜值，陷于才华，而忠于人品。</p><br/>

                            <p class="capss">一个优雅的人，懂得管好自己的嘴，无论何时何地都不夸夸其谈，更不到处炫耀，因为那是一种肤浅的表现，只能让人感到厌烦。美貌，可以是优先的入场券，却不会是永远的通行证，物质上的优厚是一种外在的优越感，而内心的丰盈才是永恒的美丽。一个真正优雅的。懂得优于别人，并不是高贵，而真正高贵是优于过去的自己，她们善于学习，懂得进取，优雅的人如沉香，散发着淡淡的清香，保持着精神上的温度和温暖，和独立的人格。这种优美的姿态，是个人的修为，也是上苍的恩赐。</p>

                            <div class="col-md-12 first">
                                <div class="info">
                                    <div>
                                        <span class="tag">#优雅</span>
                                        <span class="tag">#嘴</span>
                                        <span class="tag">#美丽</span>
                                    </div>


                                    <ul class="info-post">
                                        <li><i class="glyphicon glyphicon-comment"></i> 2 评论</li>
                                        <li><i class="glyphicon glyphicon-time"></i> 1016.10.27</li>
                                        <li><i class="glyphicon glyphicon-user"></i> mm</li>
                                        <li><i class="glyphicon glyphicon-tag"></i> 优雅，岁月，淡然</li>
                                    </ul>
                                </div>

                                <div class="clear"></div>      


                                <div class="about_author">
                                    <div class="title_content" style="margin-bottom:10px">
                                        <div class="text_content">mm</div>
                                        <div class="clear"></div>
                                    </div>

                                    <div class="clear"></div>


                                    <div class="prg_content">
                                        <img src=" images/text.png" width="100" height="100" alt="img">

                                        <div class="text">
                                            作者简介作者简介作者简介作者简介作者简介作者简介作者简介作者简介作者简介作者简介作者简介作者简介作者简介作者简介作者简介作者简介作者简介作者简介作者简介作者简介作者简介作者简介作者简介
                                        </div>

                                        <div class="nb_post" style="margin-top: 10px;">
                                            <b id="nb_post">共 10</b> 帖子
                                        </div>
                                    </div>

                                    <div class="clear"></div>
                                </div>

                                <div class="clear"></div>      


                                <div class="post_comments">

                                    <div class="title_content">
                                        <div class="text_content">2 评论</div>
                                        <div class="clear"></div>
                                    </div>

                                    <div class="clear"></div>

                                    <div class="comments">

                                        <div class="comment">
                                            <img src="images/text.png" width="100" height="100" alt="img" />
                                            <div class="text">
                                                <div class="name">地瓜 <a class="reply" href="#">回复</a></div>
                                                <div class="date">2016.10.28</div>
                                                因为面试的时候一定会被这些问题所挑战。如果支支吾吾说不清楚，要么是对自己未来不负责任，要么骨子里就是草根一族，习惯做什么都蜻蜓点水浅尝辄止，也难让人信服你进入这一行是一个权衡再三看起来合理的选择。
                                            </div>
                                            <div class="comment sub">
                                                <img src="images/text.png" width="100" height="100" alt="img" />
                                                <div class="text">
                                                    <div class="name">mm <a class="reply" href="#">回复</a></div>
                                                    <div class="date">2016.10.28</div>
                                                    职业的特殊性决定了我们需要跟后端工作者频繁的沟通。如果只顾页面实现，不考虑后台，写出来的页面也有一部分是废弃代码，在后台进行数据交互的时候用不了。还有一方面就是从招聘信息可以得知，现在几乎所有公司前端开发岗位都明确要求会后台语言，在实际工作中可能也要做客户端和服务器端之间的数据交互等。
                                                </div>
                                                <div class="clear"></div>
                                            </div>
                                            <div class="clear"></div>
                                        </div><!-- .comments -->


                                        <div class="comment">
                                            <img src="images/text.png" width="100" height="100" alt="img" />
                                            <div class="text">
                                                <div class="name">mm <a class="reply" href="#">回复</a></div>
                                                <div class="date">2016.10.29</div>
                                               还有一方面就是从招聘信息可以得知，现在几乎所有公司前端开发岗位都明确要求会后台语言，在实际工作中可能也要做客户端和服务器端之间的数据交互等。
                                            </div>
                                            <div class="clear"></div>
                                        </div><!-- .comments -->



                                    </div><!-- .post_comments -->

                                    <div class="clear"></div>      


                                    <div class="comment_form">

                                        <div class="title_content">
                                            <div class="text_content">留下您的评论</div>
                                            <div class="clear"></div>
                                        </div>


                                        <form method="post" id="comment_form">
                                            <p class="form-group" id="contact-name">
                                                <label for="name">姓名</label>
                                                <input type="text" name="name" class="form-control" id="inputSuccess" placeholder="姓名*...">
                                            </p>
                                            <p class="form-group" id="contact-email"> 
                                                <label for="email">邮箱</label>
                                                <input type="text" name="email" class="form-control" id="inputSuccess" placeholder="邮箱*...">
                                            </p>

                                            <p class="form-group" id="contact-message">
                                                <label for="message">留言</label>
                                                <textarea name="message" cols="88" rows="6" class="form-control" id="inputError" placeholder="畅所欲言*..."></textarea>
                                            </p>
                                            <input type="reset" name="reset" value="清空" class="reset">
                                            <!--<input type="submit" name="submit" value="Post Comment" class="submit">-->
                                            <button class="submit" data-toggle="modal" data-target=".bs-example-modal-sm">发表评论</button>
                                        </form>                        
                                        <div class="clear"></div>

                                    </div>
                                </div>



                                <div class="col-md-12"  style="margin-top: 20px;">
                                    <a href="#post-3" class="readmore" id="pagination"><i class="glyphicon glyphicon-chevron-right"></i></a>
                                    <a href="#post-1" class="readmore" id="pagination"><i class="glyphicon glyphicon-chevron-left"></i></a>
                                    <a href="#blog" class="readmore"><i class="glyphicon glyphicon-chevron-left"></i> 所有帖子</a>
                                </div>

                                <div class="clear"></div>

                        </article>
                    </div>
                    <div class="clear"></div>
                </div>
            </section>
            <!-- End Page Blog - Post 1 -->

            <!-- Page Blog - Post 2 -->
            <section id="post-2-page" class="content-post" style="display: none">
                <div class="row inner">

                    <div class="col-md-12" style="width: 100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;float: left;background: rgba(255, 255, 255, 0.8);padding-bottom: 15px;padding-top: 15px;">

                        <article class="postPage">

                            <div class="col-md-12 post_media">

                                <div class="post-format-icon">
                                    <a href="#" class="item-date"><span class="fa fa-pencil"></span></a>
                                </div>

                            </div>

                            <div class="title_content">
                                <div class="text_content">浅谈web前端开发</div>
                                <div class="clear"></div>
                            </div>


                            <p class="capss">
                            我对前端开发的总体体会有三：<br/>

            &nbsp;&nbsp;第一：杂而难，难度甚至超过了一般的后台开发，如果有人觉得前端开发简单只能说明他还没有入门。<br/>

            &nbsp;&nbsp;第二：web前端开发正在向响应式和移动端方向大步迈进。<br/>

            &nbsp;&nbsp;第三：前端工程师其实就是编程技术人员，用一句话来形容“比UI设计懂技术，比技术人员更懂交互”，当然也有人说前端工程师是工程师中的设计师，是设计师中的工程师。既然是编程工作，那就不会做一辈子，毕竟太累。认真敲几年代码然后去卖水果吧，还望师弟师妹们来照顾我生意。</p><br/>

                            <p class="capss">前端开发工程师是一个比较新的职业，在国内乃至国际上开始受到重视的时间不超过几年。互联网进入2.0时代后，web开发技术得到了空前的发展，尤其是前端技术。近几年，随着用户对体验的要求越来越高，前端开发技术难度也越来越大。曾经设计和制作不分的职位也终于分为UI设计师和web前端开发工程师（前端开发师）两个职位，分别向艺术和技术的方向纵向发展。</p><br/>

                            <p class="capss">从技术体系上讲，前端开发师需要掌握和了解的东西非常多，有些大牛用庞杂来形容。</p><br/>

                            <p class="capss">几年前，还没有前端开发的时候我们叫做网页制作，主要内容都是静态的页面，用户也是以浏览为主，而现在发生了翻天覆地的变化，网页不再只是承载单一的文字和图片，各种富媒体让页面内容更加生动，更注重用户体验。</p><br/>

                            <div class="col-md-12 first">
                                <div class="info">
                                    <div>
                                        <span class="tag">#php</span>
                                        <span class="tag">#web</span>
                                        <span class="tag">#web design</span>
                                    </div>


                                    <ul class="info-post">
                                        <li><i class="glyphicon glyphicon-comment"></i> 2 评论</li>
                                        <li><i class="glyphicon glyphicon-time"></i> 2016.10.28</li>
                                        <li><i class="glyphicon glyphicon-user"></i> 地瓜</li>
                                        <li><i class="glyphicon glyphicon-tag"></i> php, web design</li>
                                    </ul>
                                </div>

                                <div class="clear"></div>      


                                <div class="about_author">
                                    <div class="title_content" style="margin-bottom:10px">
                                        <div class="text_content">mm</div>
                                        <div class="clear"></div>
                                    </div>

                                    <div class="clear"></div>


                                    <div class="prg_content">
                                        <img src=" images/text.png" width="100" height="100" alt="img">

                                        <div class="text">
                                            作者简介作者简介作者简介作者简介作者简介作者简介作者简介作者简介作者简介作者简介作者简介作者简介作者简介作者简介作者简介作者简介作者简介作者简介作者简介作者简介作者简介作者简介作者简介
                                        </div>

                                        <div class="nb_post" style="margin-top: 10px;">
                                            <b id="nb_post">共 10</b> 帖子
                                        </div>
                                    </div>

                                    <div class="clear"></div>
                                </div>

                                <div class="clear"></div>      


                                <div class="post_comments">

                                    <div class="title_content">
                                        <div class="text_content">2 评论</div>
                                        <div class="clear"></div>
                                    </div>

                                    <div class="clear"></div>

                                    <div class="comments">

                                        <div class="comment">
                                            <img src="images/text.png" width="100" height="100" alt="img" />
                                            <div class="text">
                                                <div class="name">地瓜 <a class="reply" href="#">回复</a></div>
                                                <div class="date">2016.10.28</div>
                                                因为面试的时候一定会被这些问题所挑战。如果支支吾吾说不清楚，要么是对自己未来不负责任，要么骨子里就是草根一族，习惯做什么都蜻蜓点水浅尝辄止，也难让人信服你进入这一行是一个权衡再三看起来合理的选择。
                                            </div>
                                            <div class="comment sub">
                                                <img src="images/text.png" width="100" height="100" alt="img" />
                                                <div class="text">
                                                    <div class="name">mm <a class="reply" href="#">回复</a></div>
                                                    <div class="date">2016.10.28</div>
                                                    职业的特殊性决定了我们需要跟后端工作者频繁的沟通。如果只顾页面实现，不考虑后台，写出来的页面也有一部分是废弃代码，在后台进行数据交互的时候用不了。还有一方面就是从招聘信息可以得知，现在几乎所有公司前端开发岗位都明确要求会后台语言，在实际工作中可能也要做客户端和服务器端之间的数据交互等。
                                                </div>
                                                <div class="clear"></div>
                                            </div>
                                            <div class="clear"></div>
                                        </div><!-- .comments -->


                                        <div class="comment">
                                            <img src="images/text.png" width="100" height="100" alt="img" />
                                            <div class="text">
                                                <div class="name">mm <a class="reply" href="#">回复</a></div>
                                                <div class="date">2016.10.29</div>
                                               还有一方面就是从招聘信息可以得知，现在几乎所有公司前端开发岗位都明确要求会后台语言，在实际工作中可能也要做客户端和服务器端之间的数据交互等。
                                            </div>
                                            <div class="clear"></div>
                                        </div><!-- .comments -->



                                    </div><!-- .post_comments -->

                                    <div class="clear"></div>      


                                    <div class="comment_form">

                                        <div class="title_content">
                                            <div class="text_content">留下您的评论</div>
                                            <div class="clear"></div>
                                        </div>


                                        <form method="post" id="comment_form">
                                            <p class="form-group" id="contact-name">
                                                <label for="name">姓名</label>
                                                <input type="text" name="name" class="form-control" id="inputSuccess" placeholder="姓名*...">
                                            </p>
                                            <p class="form-group" id="contact-email"> 
                                                <label for="email">邮箱</label>
                                                <input type="text" name="email" class="form-control" id="inputSuccess" placeholder="邮箱*...">
                                            </p>

                                            <p class="form-group" id="contact-message">
                                                <label for="message">留言</label>
                                                <textarea name="message" cols="88" rows="6" class="form-control" id="inputError" placeholder="畅所欲言*..."></textarea>
                                            </p>
                                            <input type="reset" name="reset" value="清空" class="reset">
                                            <!--<input type="submit" name="submit" value="Post Comment" class="submit">-->
                                            <button class="submit" data-toggle="modal" data-target=".bs-example-modal-sm">发表评论</button>
                                        </form>                        
                                        <div class="clear"></div>

                                    </div>
                                </div>



                                <div class="col-md-12"  style="margin-top: 20px;">
                                    <a href="#post-3" class="readmore" id="pagination"><i class="glyphicon glyphicon-chevron-right"></i></a>
                                    <a href="#post-1" class="readmore" id="pagination"><i class="glyphicon glyphicon-chevron-left"></i></a>
                                    <a href="#blog" class="readmore"><i class="glyphicon glyphicon-chevron-left"></i> 所有帖子</a>
                                </div>

                                <div class="clear"></div>

                        </article>
                    </div>
                    <div class="clear"></div>
                </div>
            </section>
            <!-- End Page Blog - Post 2 -->

            <!-- Page Blog - Post 3 -->
            <section id="post-3-page" class="content-post" style="display: none">
                <div class="row inner">

                    <div class="col-md-12" style="width: 100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;float: left;background: rgba(255, 255, 255, 0.8);padding-bottom: 15px;padding-top: 15px;">

                        <article class="postPage">


                            <div class="col-md-12 post_media">

                                <div class="post-format-icon">
                                    <a href="#" class="item-date"><span class="fa fa-picture-o"></span></a>
                                </div>

                                <div class="media">
                                    <div class="he-wrap tpl2">
                                        <img src=" images/blog/blog-2.jpg" class="img-hover" alt="">
                                    </div>

                                </div>
                            </div>

                            <div class="title_content">
                                <div class="text_content">浅谈PHP发展前景及就业</div>
                                <div class="clear"></div>
                            </div>


                            <p class="caps">   PHP发展前景好吗?这是很多想要学习PHP开发的朋友所关注的
                             问题。有的人会说：“IT一直以来都是PHP和.net的天下，PHP发
                              展前景远没有这两个好。”</p><br/>

                            <p class="capss">在与其他同类编程语言的比较中，PHP具有开发速度快、运行
                            效率高、安全性好、可扩展性强、开源自由等特点。而回顾PHP近
                            10年来的发展过程，PHP的发展势头不可阻挡，必将成为未来web
                            开发领域的主流技术体系。</p><br/>

                            <p class="capss">其实我国的大中专院校里开设的有PHP相关专业，每年也有大量
                            的PHP专业学生毕业，但是为什么还存在这么大的人才缺口呢?据多
                            迪培训教育就业部负责人郑老师介绍，我国的PHP发展前景一片大好
                            ，学习PHP的人才自然也多，但是众所周知，我国大学课程设置都比
                            较落后，更新速度极慢，学生学到的都是几年前的技术，毕业之后根
                            本跟不上企业的需求。院校所供人才与企业需求之间存在有落差，当
                            然或出现断层。</p><br/>

                            <p class="capss">如此一来，PHP发展前景本身就好</p><br/>

                            <div class="col-md-12 first">
                                <div class="info">
                                    <div>
                                        <span class="tag">#php</span>
                                        <span class="tag">#web</span>
                                        <span class="tag">#web design</span>
                                    </div>


                                    <ul class="info-post">
                                        <li><i class="glyphicon glyphicon-comment"></i> 2 评论</li>
                                        <li><i class="glyphicon glyphicon-time"></i> 2016.10.28</li>
                                        <li><i class="glyphicon glyphicon-user"></i> 余生</li>
                                        <li><i class="glyphicon glyphicon-tag"></i> php, 前景</li>
                                    </ul>
                                </div>

                                <div class="clear"></div>      


                                <div class="about_author">
                                    <div class="title_content" style="margin-bottom:10px">
                                        <div class="text_content">mm</div>
                                        <div class="clear"></div>
                                    </div>

                                    <div class="clear"></div>


                                    <div class="prg_content">
                                        <img src=" images/text.png" width="100" height="100" alt="img">

                                        <div class="text">
                                            作者简介作者简介作者简介作者简介作者简介作者简介作者简介作者简介作者简介作者简介作者简介作者简介作者简介作者简介作者简介作者简介作者简介作者简介作者简介作者简介作者简介作者简介作者简介
                                        </div>

                                        <div class="nb_post" style="margin-top: 10px;">
                                            <b id="nb_post">共 10</b> 帖子
                                        </div>
                                    </div>
                                    <div class="clear"></div>
                                </div>

                                <div class="clear"></div>      


                                <div class="post_comments">

                                    <div class="title_content">
                                        <div class="text_content">2 评论</div>
                                        <div class="clear"></div>
                                    </div>

                                    <div class="clear"></div>

                                    <div class="comments">

                                        <div class="comment">
                                            <img src="images/text.png" width="100" height="100" alt="img" />
                                            <div class="text">
                                                <div class="name">地瓜 <a class="reply" href="#">回复</a></div>
                                                <div class="date">2016.10.28</div>
                                                因为面试的时候一定会被这些问题所挑战。如果支支吾吾说不清楚，要么是对自己未来不负责任，要么骨子里就是草根一族，习惯做什么都蜻蜓点水浅尝辄止，也难让人信服你进入这一行是一个权衡再三看起来合理的选择。
                                            </div>
                                            <div class="comment sub">
                                                <img src="images/text.png" width="100" height="100" alt="img" />
                                                <div class="text">
                                                    <div class="name">mm <a class="reply" href="#">回复</a></div>
                                                    <div class="date">2016.10.28</div>
                                                    职业的特殊性决定了我们需要跟后端工作者频繁的沟通。如果只顾页面实现，不考虑后台，写出来的页面也有一部分是废弃代码，在后台进行数据交互的时候用不了。还有一方面就是从招聘信息可以得知，现在几乎所有公司前端开发岗位都明确要求会后台语言，在实际工作中可能也要做客户端和服务器端之间的数据交互等。
                                                </div>
                                                <div class="clear"></div>
                                            </div>
                                            <div class="clear"></div>
                                        </div><!-- .comments -->


                                        <div class="comment">
                                            <img src="images/text.png" width="100" height="100" alt="img" />
                                            <div class="text">
                                                <div class="name">mm <a class="reply" href="#">回复</a></div>
                                                <div class="date">2016.10.29</div>
                                               还有一方面就是从招聘信息可以得知，现在几乎所有公司前端开发岗位都明确要求会后台语言，在实际工作中可能也要做客户端和服务器端之间的数据交互等。
                                            </div>
                                            <div class="clear"></div>
                                        </div><!-- .comments -->



                                    </div><!-- .post_comments -->

                                    <div class="clear"></div>      


                                    <div class="comment_form">

                                        <div class="title_content">
                                            <div class="text_content">留下您的评论</div>
                                            <div class="clear"></div>
                                        </div>


                                        <form method="post" id="comment_form">
                                            <p class="form-group" id="contact-name">
                                                <label for="name">姓名</label>
                                                <input type="text" name="name" class="form-control" id="inputSuccess" placeholder="姓名*...">
                                            </p>
                                            <p class="form-group" id="contact-email"> 
                                                <label for="email">邮箱</label>
                                                <input type="text" name="email" class="form-control" id="inputSuccess" placeholder="邮箱*...">
                                            </p>

                                            <p class="form-group" id="contact-message">
                                                <label for="message">留言</label>
                                                <textarea name="message" cols="88" rows="6" class="form-control" id="inputError" placeholder="畅所欲言*..."></textarea>
                                            </p>
                                            <input type="reset" name="reset" value="清空" class="reset">
                                            <!--<input type="submit" name="submit" value="Post Comment" class="submit">-->
                                            <button class="submit" data-toggle="modal" data-target=".bs-example-modal-sm">发表评论</button>
                                        </form>                        
                                        <div class="clear"></div>

                                    </div>
                                </div>



                                <div class="col-md-12"  style="margin-top: 20px;">
                                    <a href="#post-3" class="readmore" id="pagination"><i class="glyphicon glyphicon-chevron-right"></i></a>
                                    <a href="#post-1" class="readmore" id="pagination"><i class="glyphicon glyphicon-chevron-left"></i></a>
                                    <a href="#blog" class="readmore"><i class="glyphicon glyphicon-chevron-left"></i> 所有帖子</a>
                                </div>

                                <div class="clear"></div>

                        </article>
                    </div>
                    <div class="clear"></div>
                </div>
            </section>
            <!-- End Page Blog - Post 3 -->


        </div>


        <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h3 class="modal-title h3_modal" style="color: #fff !important;">评论内容</h3>
                    </div>
                    <div class="modal-body">
                        <p>1</p>
                        <p>2</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>

     </div>
  </div>
</div>
<!-- End .blog -->

<!-- .contact -->
<div id="contact" class="content_2">
                                                
   <h1 class="h-bloc">联系我</h1>


        <div class="row">

                <div class="col-lg-12">
                    <div id="map"></div>
                </div>  

                <div class="col-lg-12">
                    <div class="row" id="contact-user">
                        <div class="col-md-5">
                            <div class="contact-info">
                                <!--<h3 class="main-heading"><span>Contact info</span></h3>-->

                                <div class="title_content" style="float: none;">
                                    <div class="text_content">联系信息</div>
                                    <div class="clear"></div>
                                </div>

                                <ul>
                                    <li><span class="span-info"><i class="glyphicon glyphicon-map-marker"></i> 坐标:</span> 上海<br /><br /></li>
                                    <li><span class="span-info"><i class="glyphicon glyphicon-envelope"></i> 邮箱:</span> 18885689570@163.com</li>
                                    <li><span class="span-info"><i class="glyphicon glyphicon-phone"></i> Phone:</span> 18885689570</li>
                                    <li><span class="span-info"><i class="glyphicon glyphicon-globe"></i> 网站:</span> amay1115.github.io/amayblog</li>
                                </ul>
                            </div>
                            <!-- /Contact Info -->
                            <div class="clear"></div>

                            <!--<h3 class="main-heading" style="margin-left: 22px;"><span>Follow me</span></h3>-->

                            <div class="title_content tiltle_contacts" style="float: none;">
                                <div class="text_content">点击我</div>
                                <div class="clear"></div>
                            </div>

                        

                                <div id="profile_social">
                                    <div class="t-center">
                                        <a href="#"><i class="fa fa-facebook"></i></a>
                                        <a href="https://github.com/Amay1115
                                        "><i class="fa fa-github-alt"></i></a>
                                     </div>
                                    <div class="clear"></div>
                                </div>
                  


                        </div>

                        <div class="col-md-7">
                            <!-- Contact Form -->
                            <div class="title_content" style="float: none;">
                                <div class="text_content">保持联系</div>
                                <div class="clear"></div>
                            </div>

                            <div class="contact-form">
                                <!--<h3 class="main-heading"><span>Let's keep in touch</span></h3>-->



                                <div id="contact-status"></div>

                                <form action="#" id="contactform">
                                    <p class="form-group" id="contact-name">
                                        <label for="name">姓名</label>
                                        <input type="text" name="name" class="form-control name-contact" id="inputSuccess" placeholder="姓名..." />
                                    </p>
                                    <p class="form-group" id="contact-email"> 
                                        <label for="email">邮箱</label>
                                        <input type="text" name="email" class="form-control email-contact" id="inputSuccess" placeholder="邮箱..." />
                                    </p>

                                    <p class="form-group" id="contact-message">
                                        <label for="message">您想说的话...</label>
                                        <textarea name="message" cols="88" rows="6" class="form-control message-contact" id="inputError" placeholder="您想说的话..."></textarea>
                                    </p>
                                    <input type="reset" name="reset" value="清空" class="reset">
                                    <!-- <input type="submit" name="submit" value="SEND MESSAGE" class="submit">-->

                                    <section class="button-demo" style="display: inline-block;">
                                        <button class="ladda-button submit send_email" name="submit" data-color="green" data-style="expand-left">发送消息</button>
                                    </section>

                                </form>
                            </div>
                            <!-- /Contact Form -->
                        </div>
                    </div>
                </div>  
            </div>                           
           </div>
           <!-- End .contact -->

          </div>
          <!-- End #resp-tabs-container --> 

         </div><!-- End verticalTab -->

       </div><!-- End flexy_content -->


     </div><!-- End row -->

    </div><!-- End col-md-12 -->

   </div><!-- End row -->

  </div><!-- End container -->

 </section>
 <!-- End Content -->

</div>
        <!-- End wrapper -->

        <!-- Switcher -->
        <div id="custumize-style">
            <h2>样式选择器<a href="#" class="switcher"><i class="fa fa-cogs icon-switcher"></i></a></h2>
            <div>
                <h3>主题颜色</h3>
                <ul class="colors-style" id="color1">

                    <li><a href="#" class="gray"></a></li>
                    <li><a href="#" class="green"></a></li>
                    <li><a href="#" class="blue"></a></li>
                    <li><a href="#" class="red"></a></li>
                    <li><a href="#" class="yellow"></a></li>

                    <li><a href="#" class="DarkBlue"></a></li>
                    <li><a href="#" class="orange"></a></li>
                    <li><a href="#" class="rose"></a></li>
                    <li><a href="#" class="lightseagreen"></a></li>
                    <li><a href="#" class="darkolivegreen"></a></li>

                </ul>
            </div>
            <div> 

                <h3 class="layouts">简介图像</h3>
                <div id="show">

                    <div class="clean-check">

                        <input type="radio" id="r1" name="style_profile" value="style_profile_1" checked="checked" />
                        <label for="r1"><span></span>旋转图像</label>

                        <input type="radio" id="r2" name="style_profile" value="style_profile_2" />
                        <label for="r2"><span></span>固定图像</label>

                    </div>
                </div>


                
                <h3 class="layouts">页面生成</h3>
                <div id="show">
                    <div class="clean-check" style="padding-left: 30px;">

                        <input type="radio" id="pb1" name="page_builder" value="index.html"   />
                        <label for="pb1"><span></span>风格 1</label>

                        <input type="radio" id="pb2" name="page_builder" value="page-builder-2.html"  checked  />
                        <label for="pb2"><span></span>风格 2</label>

                        <input type="radio" id="pb3" name="page_builder" value="page-builder-3.html"  />
                        <label for="pb3"><span></span>风格 3</label>

                        <input type="radio" id="pb4" name="page_builder" value="page-builder-4.html"  />
                        <label for="pb4"><span></span>风格 4</label>
                    </div>
                </div>      

                <h3 class="layouts">页面动画</h3>
                <div id="show">

                    <select name="one" class="dropdown-select">
                        <optgroup label="弹跳方向">
                            <option value="bounceIn" selected>反弹出</option>
                            <option value="bounceInDown">向下弹出</option>
                            <option value="bounceInLeft">向左弹出</option>
                            <option value="bounceInRight">向右弹出</option>
                            <option value="bounceInUp">向上弹出</option>
                        </optgroup>

                        <optgroup label="淡入方向">
                            <option value="fadeIn">淡入</option>
                            <option value="fadeInDown">向下淡入</option>
                            <option value="fadeInLeft">向左淡入</option>
                            <option value="fadeInRight">向右淡入</option>
                            <option value="fadeInUp">向上淡入</option>
                        </optgroup>      
                    </select>

                </div>

                <h3 class="layouts" style="padding-top:5px">背景风格</h3>
                <div id="show">

                    <div class="clean-check">

                        <input type="radio" id="s1" name="layout" value="bg_color" checked="checked" />
                        <label for="s1"><span></span>颜色</label>
                        
                        <input type="radio" id="s2" name="layout" value="bg_slider" />
                        <label for="s2"><span></span>滑动</label>

                    </div>

                </div>

            </div>

            <div> 
                <h3>背景颜色</h3>
                <ul class="colors-style bgsolid" id="bgsolid">
                    <li><a href="#" class="gray-bg"></a></li>
                    <li><a href="#" class="green-bg"></a></li>
                    <li><a href="#" class="blue-bg"></a></li>
                    <li><a href="#" class="red-bg"></a></li>
                    <li><a href="#" class="yellow-bg"></a></li>
                </ul>
            </div> 

            <div>  
                <h3>背景图片</h3>
                <ul class="colors-style bg" id="bg">
                    <li><a href="#" class="bg1"></a></li>
                    <li><a href="#" class="bg2"></a></li>
                    <li><a href="#" class="bg3"></a></li>
                    <li><a href="#" class="bg4"></a></li>
                    <li><a href="#" class="bg5"></a></li>
                </ul>
            </div>

            <div id="button-reset"><a href="#" class="button color blue boxed">Reset</a></div>
        </div>
        <!-- End Switcher -->
        <!-- End Switcher -->



       <script type="text/javascript" src="js/jquery.min.js"></script>
       <script type="text/javascript" src="js/bootstrap.min.js"></script> 
       <script type="text/javascript" src="js/jquery.cycle2.min.js"></script>
       <script type="text/javascript" src="js/jquery.mixitup.min.js"></script> 
       <script type="text/javascript" src="js/HeadImage.js"></script>
       <script type="text/javascript" src="js/easyResponsiveTabs.min.js"></script> 
       <script type="text/javascript" src="js/jsSwitcher/jquery.cookie.js"></script>    
       <script type="text/javascript" src="js/jsSwitcher/switcher.js"></script> 
       <script type="text/javascript" src="js/jquery.mCustomScrollbar.concat.min.js"></script>      
       <script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
<!--       <script type="text/javascript" src="js/gmaps.min.js"></script>
-->       
       <script type="text/javascript" src="js/main.js"></script>


        <!-- code js for image rotate -->
        <script type="text/javascript">

            var mouseX;
            var mouseY;
            var imageOne;

            /* Calling the initialization function */
            $(init);

            /* The images need to re-initialize on load and on resize, or else the areas
             * where each image is displayed will be wrong. */
            $(window).load(init);
            $(window).resize(init);

            /* Setting the mousemove event caller */
            $(window).mousemove(getMousePosition);

            /* This function is called on document ready, on load and on resize
             * and initiallizes all the images */
            function init() {

                /* Instanciate the mouse position variables */
                mouseX = 0;
                mouseY = 0;

                /* Instanciate a HeadImage class for every image */
                imageOne = new HeadImage("one");

            }

            /* This function is called on mouse move and gets the mouse position. 
             * It also calls the HeadImage function to display the correct image*/
            function getMousePosition(event) {

                /* Setting the mouse position variables */
                mouseX = event.pageX;
                mouseY = event.pageY;

                /*Calling the setImageDirection function of the HeadImage class
                 * to display the correct image*/
                imageOne.setImageDirection();

            }

        </script>
    </body>
</html>
